从 React 中的子组件访问路由参数

React 是一个 JavaScript 库，可让你为 Web 应用程序构建漂亮的用户界面。与其他框架不同，它没有内置路由功能，因此 React 开发人员需要使用外部库。

React 最流行的路由库是 react-router，其中包括许多对导航、路由匹配和其他基本路由实用程序必不可少的自定义组件。

React Router 遵循核心 React 库的基于组件的方法。react-router 包中包含的所有组件都可以分为三大类：路由、路由匹配器和导航器组件。

此类别中的组件是使其他一切正常工作所必需的。例如，在构建 Web 应用程序时，你最有可能使用 react-router-dom 库中的 BrowserRouter 组件。

要在你的应用程序中执行路由匹配和导航，首先，你必须用 BrowserRouter 组件包装它。BrowserRouter 通常是构建 Web 应用程序所需要的，但它不是该类别中唯一的组件。

查看官方文档页面了解更多信息。

两个自定义组件，特别是 和 ，属于路由匹配器。React 开发者结合使用这两者来根据当前的 URL 来确定需要渲染哪个组件。

通常， 有多个具有不同路径的 组件作为其子组件。当 Switch 组件找到具有与当前 URL 匹配的路径属性的 时，它将呈现相应的组件并忽略所有其他 组件。

组件接受 path 属性，你可以在其中指定应呈现特定组件的 URL 结构。然而，理解 exact 属性的使用也很重要。

它是一个布尔属性，因此你不需要设置值。如果该属性存在于组件中，它会稍微改变 组件及其 path 属性的行为。

默认情况下，只要 URL 的开头遵循为 Route 组件指定的 path，组件就会与 URL 匹配。例如，具有此特定路径的组件将匹配任何 URL。

如果我们设置 exact 属性，如下例所示，此 组件将尝试匹配整个 URL，而不仅仅是开头。因此，只有当 URL 为 example.com/ 时，Home 组件才会呈现。

react-router 包还包括用于更改 URL 的组件。 和 是最受欢迎的。

是常规 HTML 中常规 链接元素的略微修改版本。它专为单页应用程序库和框架而设计。

使用 组件更改 URL 不会重新加载页面，但会在必要时更改视图。

组件实际上与 相同，但它允许你在它处于 active 状态时设置特定样式（例如，当你从菜单查看特定页面时） ，你可以突出显示该菜单项）。

如果你正在构建一个高级应用程序，你无法为每个帖子甚至每个类别定义单独的路由。相反，你将使用称为动态路由的东西。

让我们看一下这个例子。

这个例子指定了一个动态路径，它根据 id 呈现 组件。例如，以下链接：example.com/posts/5 将使用 id=5 渲染 组件。

但是，如果你需要从子组件访问动态路径的参数怎么办？ 组件可能需要显示其 id。

从 Route 组件获取路径值的一个条件是 Route 组件应该呈现子组件。在上面的示例中，Post 组件作为 children 值传递，因此如果你尝试访问动态参数值，它将不起作用。

相反，你可以使用 render 或 component 属性直接从 Route 组件渲染组件。让我们看看这两个例子。

在这种情况下，我们使用 component 属性并将其设置为当 URL 与路径匹配时要显示的组件。

当这样渲染时，子 Post 组件仍然可以访问 Route 组件中的 props，包括 URL 中的动态 id 参数。

或者，你可以使用 Route 组件上的 render 属性来获得相同的结果。它稍微冗长一些，但对于某些人来说可能更容易理解。

这样，你仍然可以访问 props 并从 props.match.params.id 获取 id 值。

自 react-router 版本 5.1 发布以来，该软件包还包含一个有用的 useParams() 挂钩，允许开发人员轻松地从 URL 访问参数。

在这种情况下，使用 component 或 render 属性还是在 Route 的开始标签和结束标签之间传递子组件都没有关系。

让我们看一下这个例子。

useParams() 钩子返回一个带有来自 URL 的参数的键值对的对象。我们可以在定义变量并在 JSX 中引用它时对其进行解构。

它看起来更具可读性，但 useParams() 钩子只适用于功能组件。

上一篇：React 路由与 React 路由 DOM

下一篇：使用 React Router DOM 进行程序化导航

发布时间：2023/03/08 浏览次数：179 分类：WEB前端

事件侦听器对于单页应用程序至关重要。在本文中，我们将探讨如何在 React 中添加它们。

发布时间：2023/03/08 浏览次数：88 分类：WEB前端

onChange 是 React 中最常见的输入事件之一。本文将帮助你了解它的工作原理。

发布时间：2023/03/08 浏览次数：154 分类：WEB前端

在 React 中处理事件是构建现代 Web 应用程序的关键。这是处理 div 上的 onKeyDown 事件的方法

发布时间：2023/03/08 浏览次数：187 分类：WEB前端

本教程演示了如何从 React 中 onChange 事件的复选框发送值。

发布时间：2023/03/08 浏览次数：79 分类：WEB前端

本教程演示了如何在 React 中使用 onDoubleClick。

发布时间：2023/03/08 浏览次数：157 分类：WEB前端

在本文中，我们将研究在 Link 组件上设置 onClick 事件。

发布时间：2023/03/08 浏览次数：126 分类：WEB前端

本文介绍了如何在编写 React 应用程序时从查询字符串中提取参数值

发布时间：2023/03/08 浏览次数：59 分类：WEB前端

重定向用户是构建复杂 React 应用程序的重要组成部分。

发布时间：2023/03/08 浏览次数：191 分类：WEB前端

本文展示了如何使用 React Router DOM 以编程方式导航。

转载请发邮件至 [email protected] 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：